<template>
  <div>
    <el-card>
      <div class="put-container">
        <div class="form-link">
          <div class="title">问卷链接</div>
          <div class="info">
            <div class="qr-code">
              <img style="width: 105px; height: 105px" :src="qr_code" alt="" />
            </div>
            <div class="link-container">
              <div class="link">
                <el-input v-model="linkInput" :disabled="true">
                  <template slot="append"
                    ><el-button type="success" @click="copyText(linkInput)"
                      >复制</el-button
                    ></template
                  >
                </el-input>
              </div>
              <div class="button">
                <el-button type="info">下载二维码</el-button>
                <el-button type="info">打开</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="devide"></div>
        <div class="web">
          <div class="title">网站嵌套</div>
          <div class="web-link">
            <el-input v-model="webLinkInput" :disabled="true">
              <template slot="append"
                ><el-button type="success" @click="copyText(webLinkInput)"
                  >复制</el-button
                ></template
              >
            </el-input>
          </div>
        </div>
        <div></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'putForm',
  mounted() {
    this.id = this.$route.query.id
    this.linkInput = `${ process.env.VUE_APP_FORM_URL }${ this.id }`
    this.webLinkInput = `<iframe height="1200" width="800" src="${ process.env.VUE_APP_FORM_URL }${ this.id }" frameborder="0" allowfullscreen></iframe>`
    this.qr_code = `http://api.xyde.net.cn/qr/?content=${ process.env.VUE_APP_FORM_URL }${ this.id }`
    console.log(this.$route)
  },
  data() {
    return {
      // 链接地址
      linkInput: `${ process.env.VUE_APP_BASE_URL }id`,
      // 网站嵌套地址
      webLinkInput: `<iframe height="1200" width="800" src="${ process.env.VUE_APP_BASE_URL }id" frameborder="0" allowfullscreen></iframe>`,
      id: null,
      qr_code: ''
    }
  },
  methods: {
    copyText(text) {
      var input = document.createElement("input");   // js创建一个input输入框
      input.value = text;  // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input);    // 将输入框暂时创建到实例里面
      input.select();   // 选中输入框中的内容
      document.execCommand("Copy");   // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.put-container {
  .form-link {
    margin-left: 30px;
    .title {
      margin-left: 9px;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .info {
      display: flex;
      .qr-code {
        margin-right: 20px;
      }
      .link-container {
        .link {
          margin-top: 10px;
          margin-bottom: 10px;
          color: black;
        }
      }
    }
  }
  .devide {
    border-top: 1px solid #ccc;
    margin: 50px 30px 50px 30px;
  }
  .web {
    margin-left: 30px;
    .title {
      margin-left: 9px;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .web-link {
      width: 60%;
    }
  }
}
</style>